import React, { Component } from 'react';
import { Steps, Space, Button } from 'antd';
import TheDialog from '@/components/TheDialog'
import { getDateTime3, getDateTime2 } from '@/utils/getDate'
import {
    apifindCheckLogistics
} from "@/request/orderManagement";

const { Step } = Steps
export default class Logistics extends Component {
    constructor(props) {
        super(props)
        this.state = {
            options:this.props.options,
            logVisible: false,
            courierCode: '',
            courierNo: '',
            logisticsInformation: null
        }
    }
    componentDidMount() {
    }
    onLogistics = async (shopOrderId,ckCode) => {
        let params = {
            orderId: shopOrderId,
            code : ckCode
        }
        apifindCheckLogistics(params).then(response=>{
            if (response.code === 0 && response.data) {
                let { msg: { context } } = response.data
                context = context ? context.map(v => {
                    let time = v.time * 1000
                    time = new Date(parseInt(time))
                    time = getDateTime2(time)
                    return {
                        ...v,
                        time
                    }
                }) : null
                let courierCode = ""
                let options = this.props.options
                for (let i = 0; i < options.length; i++) {
                    if (options[i].value === response.data.courierCode) {
                        courierCode = options[i].label
                    }
                }
                this.setState({
                    courierCode,
                    courierNo: response.data.courierNo,
                    logisticsInformation: context,
                    logVisible: true
                })
            } else {
                return React.$message({
                    type: 'info',
                    content: '暂无物流信息'
                })
            }
        })
    }
    logDialogCancel = () => {
        this.setState({
            logisticsInformation: null,
            logVisible: false
        })
    }
    render() {
        const { logVisible, courierCode, courierNo, logisticsInformation } = this.state
        return (
            <>
                <TheDialog
                    visible={logVisible}
                    handleCancel={this.logDialogCancel}
                    footer={null}
                    title={'跟踪物流'}
                >
                    <div style={{ height: 500, overflowY: 'auto' }}>
                        {
                            <>
                                快递公司： {courierCode}
                                <div>快递单号：{courierNo}</div>
                            </>
                        }
                        {logisticsInformation &&
                            <Steps progressDot current={logisticsInformation.length - 1} direction="vertical">
                                {logisticsInformation.map(v => {
                                    return <Step title={v.time} description={v.desc} />
                                })}
                            </Steps>}
                        {!logisticsInformation && <span>暂无物流信息</span>}
                    </div>
                    <Space style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
                        <Button type={'primary'} onClick={this.logDialogCancel}>确定</Button>
                    </Space>
                </TheDialog>
            </>
        );
    }
}
